<script setup>
// 计算属性
// 使用场景：依赖一个或者多个值产生一个新的值
// 特点：它具备缓存，它是响应式的
// 用法：
// 1：导入  import {computed} from 'vue'
// 2: 调用  const xxx = computed(()=>{ return 新的值})
// 3：访问：  template: {{ xxx }}   js: xxx.value

import { ref, computed } from 'vue'

// 需求： abcde  通过计算属性反转 edcba
const str = ref('abcde')
const reStr = computed(() => {
  return str.value.split('').reverse().join('')
})

// computed完成写法
/*
  const xxx = computed({
    get(){
      // xxx.value
      return 新的值
    },
    set(value){
      xxx.value=值
      ....
    }
  })

*/
const money = ref(100)
const dollar = computed({
  get () {
    return money.value / 7
  },
  set (value) {
    console.log(value)
    // money.value = value * 7
  }
})
</script>

<template>
  <div>
    <h2>{{ str }}</h2>
    <button @click="str += 'a'">修改str</button>
    <h2>{{ reStr }}</h2>
    <hr />
    <h3>{{ money }}</h3>
    <h3>{{ dollar }}</h3>
    美元:<input type="text" v-model="dollar" />
    <button @click="dollar = 999">修改计算属性</button>
  </div>
</template>
